@charset "utf-8";
/* CSS Document */

/* Define the style for the main wrapper.
 * We will have the slider inside of a wrapper which will be 100% in width in order to stretch over the whole window.
 * Now, the slider itself will also have a width of 100%, making it use all the space there is in width.
 * But we will also define a maximum width, so that the images in our slider don't get stretched too much when dealing with a big screen */
.ei-slider{
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 400px;
    margin: 0 auto;
}

/* While the images are loading, we will add a loading element which will have the following style */
.ei-slider-loading{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:999;
    background: rgba(0,0,0,0.9);
    color: #fff;
    text-align: center;
    line-height: 400px;
}

/* The unordered list will occupy all the space we defined and will not show any overflow */
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
}

/* The list elements that will hold the images will be of absolute position.
 * Depending from where we navigate we will slide them from the left or from the right */
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/* The width of the image will be set in our JavaScript but we also want to define it if we don't have JS enabled */
.ei-slider-large li img{
    width: 100%;
}

/* The title holder will be positioned in the middle of the list element with a right margin to fit the picture in our example (and not to overlap the face in the photography) */
.ei-title{
    position: absolute;
    right: 50%;
    margin-right: 13%;
    top: 30%;
}

/* The style for the headings is the following */
.ei-title h2, .ei-title h3{
    text-align: right;
}
.ei-title h2{
    font-size: 40px;
    line-height: 50px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #b5b5b5;
}
.ei-title h3{
    font-size: 70px;
    line-height: 70px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    color: #000;
}

/* The navigation list will have a small height of 13 pixels.
 * We will set a default width for the thumbnails in the initialisation of our plugin.
 * From that width we will set a max-width to the unordered list.
 * This will make it elastic when we resize the window, but not occupy all the width there is. */
.ei-slider-thumbs{
    height: 13px;
    margin: 0 auto;
    position: relative;
}

/* The list elements of the navigation list will be of relative position */
.ei-slider-thumbs li{
    position: relative;
    float: left;
    height: 100%;
}

/* The special slider element that indicates the current image will be positioned absolutely on top of the current thumbnail element */
.ei-slider-thumbs li.ei-slider-element{
    top: 0px;
    left: 0px;
    position: absolute;
    height: 100%;
    z-index: 10;
    text-indent: -9000px;
    background: rgba(0,0,0,0.9);
}

/* The link elements will have a white box shadow to show a tiny separation and some darker shadow to appear under them.
 * We'll also add a transition to the element so that we can change the background-color smoothly on hover */
.ei-slider-thumbs li a{
    display: block;
    text-indent: -9000px;
    background: #666;
    width: 100%;
    height: 100%;
    cursor: pointer;
    box-shadow:
        0px 1px 1px 0px rgba(0,0,0,0.3),
        0px 1px 0px 1px rgba(255,255,255,0.5);
    transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
    background-color: #f0f0f0;
}

/* The image will be positioned absolutely and we will add a transition and a box reflection to it.
 * Adding a max-width to it will make sure that the thumb will adjust to the size of the list element when the window gets smaller than the width of the unordered list itself */
.ei-slider-thumbs li img{
    position: absolute;
    bottom: 50px;
    opacity: 0;
    z-index: 999;
    max-width: 100%;
    transition: all 0.4s ease;
    -webkit-box-reflect:
        below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(50%, transparent),
            to(rgba(255,255,255,0.3))
            );
}

/* On hover, we will animate the opacity and the bottom value so that it appears to be sliding in from the top */
.ei-slider-thumbs li:hover img{
    opacity: 1;
    bottom: 13px;
}

/* Last but not least, we want to make sure that from a certain width on, the slider title will not cover the best parts of our image.
 * So, we will make it appear at the bottom of the image with a semi-transparent white background */
@media screen and (max-width: 830px) {
    .ei-title{
        position: absolute;
        right: 0px;
        margin-right: 0px;
        width: 100%;
        text-align: center;
        top: auto;
        bottom: 10px;
        background: rgba(255,255,255,0.9);
        padding: 5px 0;
    }
    .ei-title h2, .ei-title h3{
        text-align: center;
    }
    .ei-title h2{
        font-size: 20px;
        line-height: 24px;
    }
    .ei-title h3{
        font-size: 30px;
        line-height: 40px;
    }
}

/* For the case that we don't have JavaScript enabled we will add this piece of CSS to ensure that our slides are shown. We will hide the thumbnail navigation */
.ei-slider{
    height: auto;
}
.ei-slider-thumbs{
    display: none;
}
.ei-slider-large li{
    position: relative;
}